<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">投诉建议</block>
		</cu-custom>
		<view class="padding">
			<text>反馈类型</text>
			<view class="grid col-3 margin-top-xs">
				<view class="padding-sm" v-for="(item,index) in types" :key="index">
					<view class="item bg-gray padding-xs radius text-center" :class="form.typeId == index ? 'china-btn-bg-green' : ''" @click="setIndex(index)">
						{{item}}
					</view>
				</view>
			</view>
			<view class="padding-sm">
				<textarea maxlength="-1" placeholder="请输入6个字以上的问题描述" class="bg-gray padding-xs radius desc" v-model="form.content"></textarea>
			</view>
			<view class="margin-top">
				<text>联系方式</text>
				<view class="padding-sm">
					<view class="item bg-gray radius mobile-input">
						<input type="number" placeholder="请输入手机号便于联系(非必填)" v-model="form.mobile" class="radius-lg">
					</view>
				</view>
			</view>
			
			<view class="submit padding flex flex-direction">
				<button class="cu-btn china-btn-bg margin-tb-sm lg round shadow" @click="submit()">提交反馈</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				types:[
					'产品建议','功能故障','其他问题'
				],
				form:{
					typeId:0,
					content:'',
					mobile:''
				}
			};
		}
	}
</script>

<style lang="less" scoped>
.mobile-input{
	padding: 10rpx;
}
.desc{
	width: 100%;
}
</style>
